<template>
	<view class="video_list">
			<view
			 :class="['video_one',act_id==item._id?'active':'']"
			 v-for="(item,index) in VList"
			 :key="item.ID" @click="toChange(item._id,item)">
				  <text>
					  <u-icon name="play-circle" size="30"></u-icon>
				  </text>
				  <text>{{dirNumber}}-{{index+1}}</text>
				   <text>{{item.Vname}}</text>
				   <text>({{item.Vtime}})</text>
			 </view>
	</view>
</template>

<script>
	import {getDirVideo} from '../../api/learn.js'
	export default {
		data(){
			return {
				videoList:[],
				act_id:""//正在播放的视频的_id
				
			}
			
		},
		created(){
			
			
			getDirVideo(this.CDid,this._id).then(res=>{
				console.log(res,"44444444444")
				this.videoList=res.data.list;
				
			})
		},
		methods:{
			toChange(_id,item){//点击视频切换激活_id
				this.act_id=_id;
				this.$bus.$emit('sendVideo',item)
				
			}
		},
		computed:{
			VList(){
				let arr=this.videoList.map((item)=>{
					// item.Vtime  123秒
					let f=parseInt(item.Vtime/60);
					let s=item.Vtime%60;
					item.Vtime=(f<=9?'0'+f:f)+":"+(s<=9?'0'+s:s)
					return item
				})
				return arr
			}
		},
		props:{
			CDid:String,
			_id:String,
			dirNumber:Number
		}
		
	}
</script>

<style lang="scss">
	.video_list{
		width: 100vw;
		.video_one{
			display: flex;
			justify-content: space-between;
			font-size: 16px;
			align-items: center;
			height: 60px;
			line-height: 60px;
			border-bottom: 1px solid black;
			padding: 0 20px ;
			box-sizing: border-box;
			&.active{
				color:red;
			}
		}
	}
</style>